<template>
	<view class="box">
		<!-- 首页头部 -->
		<!-- <view class="box-header">
			<u-navbar title="确认订单" :autoBack="true"></u-navbar>
		</view> -->
		<view class="box-body">
			<!-- 收货地址 -->
			 <view class="address"> 
				<view class="locationIcon">
					<u-icon name="map" size="24"></u-icon>
				</view>
				<view class="information">
					<view v-if="defualtCity==0">  
						<view class="user">
							<view class="userDefault">暂无收货地址</view>
						</view>
					</view>
					<view v-else-if="defualtCity==1">
						<view class="user">
							<view class="userDefault">暂无默认收货地址</view>
						</view>
					</view>
					<view v-if="defualtCity==2">
						<view class="user">
							<text class="userName">{{user.recipientName}} {{user.contactNumber}}</text>
						</view>
						<view class="userDefault">
							<view class="province">{{user.provincee}} {{user.cityy}} {{user.areaa}} {{user.specificAddress}}</view>
						</view>
					</view>
				</view>
				<view class="updateBut">
					<u-button color="#2F2E33" text="新增" class="but" v-if="defualtCity==0" @click="newAddress"></u-button>
					<u-button color="#2F2E33" text="编辑" class="but" v-else @click="updateAddtress"></u-button>
				</view>
			 </view>
			 <!-- 购买课程详情-->
			 <view class="curriculum">
				 <view class="school">进思线上教育</view>
				 <view class="courseOrder">
					 <view class="courseUrl">
						 <image :src="course.url"></image>
					 </view>
					 <view class="courseName">
						 <view>{{course.courseName}}</view>
					 </view>
					 <view class="courseMoney">
						 <view class="money">￥{{course.courseNprice}}</view>
						 <view class="courseNum">共1件</view>
					 </view>
				 </view>
			 </view>
			 <!-- 享用优惠券 -->
			 <view class="coupon">
				 <view class="thisOrder">
					 <text>本单享用</text>
				 </view>
				 <view class="couponOrder">
					 <text class="couponn">优惠券</text>
					 <text class="courseCoupon" v-if="courseCoupon==''" @click="toSelectCoupons">请选择优惠券</text>
					 <text class="courseCoupon" v-else @click="toSelectCoupons">已选择 {{courseCoupon.couponName}}</text>
				 </view>
			 </view> 
			 <!-- 账单明细-->
			 <view class="billDetails">
				 <view class="OrderBillDetails">明细</view>
				 <view class="price">
					<text class="courseJia">价钱</text>
					<text class="coursePrice">￥{{course.courseNprice}}</text>
				 </view>
				<view class="price">
					<text class="courseJia">优惠</text>
					<text class="coursePrice" v-if="courseCoupon.length=0">￥{{couponMoney}}</text>
					<text class="coursePrice" v-else>￥{{couponMoney}}</text>
				</view> 
				<view class="price">
					<text class="courseJia">合计</text>
					<text class="coursePrice">￥{{countNprice}}</text>
				</view> 
			 </view>
			 <view class="tips">
				 请仔细阅读
				<text class="purchaseInstructions">购买须知</text>
				，点击提交订单即代表你以阅读并同意条款内容
			</view>
		</view>
		<view class="box-floot">
			<u-tabbar>	
				<view class="totalPrice">应付:<text>￥{{countNprice}}</text></view>
				<u-button color="#2F2E33" class="placeOrder" @click="formOrder">提交订单</u-button>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {selectJsCourseById} from "@/static/http/getData.js"
	
	import {selectUserDefaultCity} from "@/static/http/getData.js"
		
	export default{
		data(){
			return{
				courseId:"",
				course:[],
				nprice:"",
				courseCoupon:[],
				user:[],
				defualtCity:0,
				//课程价格
				courseNprice:0.0,
				//优惠券金额
				couponMoney:"0.0",
				//合计
				countNprice:""
			}
		},
		onLoad(option){
			this.courseId = option.courseId;
			this.selectJsCourseById(option.courseId);
			this.selectUserDefaultCity();
		},
		activated(){
			this.selectJsCourseById(this.courseId);
			this.selectUserDefaultCity();
			this.selectCoupon();
		},
		methods:{
			//通过课程id查看课程详情
			selectJsCourseById(courseId){
				var data1 = {
					courseId:courseId
				};
				selectJsCourseById(data1).then(res=>{
					this.course = res.data.data;
					this.courseNprice = res.data.data.courseNprice;
					this.countCourseNprice(this.courseNprice);
				})
			},
			//查看当前用户是否有默认地址
			selectUserDefaultCity(){
				var data1 ={
					userId:89,
					isDefault:''
				};
				selectUserDefaultCity(data1).then(res=>{
					var defaultt = res.data.data;
					if(defaultt.length==0){
						this.defualtCity = 0;
					}else{
						for (var i = 0; i < defaultt.length; i++) {
							if(defaultt[i].isDefault==2){
								this.defualtCity=2;
								this.user = defaultt[i];
								return;
							}else{
								this.defualtCity=1;
							}
						}
					}
				})
			},
			//跳转到新增页面
			newAddress(){
				uni.navigateTo({
					url:"/pages/shopping/newAddress"
				})
			},
			//编辑地址
			updateAddtress(){
				uni.navigateTo({
					url:"/pages/shopping/updateDefaultAddress"
				})
			},
			//选择优惠券
			toSelectCoupons(){
				uni.navigateTo({
					url:"/pages/shopping/selectCoupons?courseNprice="+this.courseNprice
				})
			},
			//获取选择优惠券的缓存
			selectCoupon(){
				if(localStorage.getItem('userCoupons')!=null){
					var user = localStorage.getItem('userCoupons');
					this.courseCoupon = JSON.parse(user);
					this.couponMoney = JSON.parse(user).couponMoney;
				}
			},
			//合计
			countCourseNprice(courseNprice){
				var couponMoney = this.couponMoney;
				var lastCountNum = courseNprice-couponMoney;
				if(this.courseCoupon.length==0){
					this.countNprice = this.sum(courseNprice,couponMoney);
				}else{
					this.countNprice = this.sum(courseNprice,couponMoney);
				}
			},
			sum(courseNprice,couponMoney){
				if(courseNprice-couponMoney<0){
					return "0.0";
				}else if(courseNprice-couponMoney==0){
					return "0.0";
				}else{
					var count = courseNprice-couponMoney;
					return count.toString();
				}
			},
			//提交订单
			formOrder(){
				/* uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				}); */
			},
			//顶部时间
			getTime(date){
			    var year = date.getFullYear(); //获取完整的年份(4位,1970-????)
			    var month = date.getMonth()+1; //获取当前月份(0-11,0代表1月)
			    var today = date.getDate(); //获取当前日(1-31)
			    var hour = date.getHours(); //获取当前小时数(0-23)
			    var minute = date.getMinutes(); //获取当前分钟数(0-59)
			    var second = date.getSeconds(); //获取当前秒数(0-59)
			    var nowTime;
			    nowTime = year+'-'+this.fillZero(month)+'-'+this.fillZero(today)+' '+this.fillZero(hour)+':'+this.fillZero(minute)+':'+this.fillZero(second);
			    return nowTime;
			},
			//时间的为零操作
			fillZero(str){
			    var realNum;
			    if(str<10){
					realNum	= '0'+str;
			    }else{
					realNum	= str;
			    }
			        return realNum;
			}
		}
	}
</script>

<style>
	*{
		margin:0;
		padding:0;
	}
	.box{
		margin:0 auto;
		width:100%;
	}
	.box .box-header{
		margin:0 auto;
		width:100%;
	}
	.box .box-body{
		margin:14px auto;
		width:94%;
	}
	.box .box-body .address{
		width:100%;
		height:70px;
		line-height:26px;
		border-radius:10px;
		background-color:#FFFFFF;
	}
	.box .box-body .address .locationIcon{
		float: left;
		width:10%;
		margin:24px 0px 0px 10px;
	}
	.box .box-body .address .information{
		float: left;
		width:68%;
		font-size:16px;
		margin-top: 8px;
	}
	.box .box-body .address .information .user .userName{
		font-weight: bold;
	}
	.box .box-body .address .information .user .phone{
		padding-left:10px;
	}
	
	.box .box-body .address .information .user .userDefault{
		margin-top:13px;
	}
	.box .box-body .address .updateBut{
		float: right;
		width:10%;
		padding:15px 10px 0px 0px;
	}
	.box .box-body .address .updateBut .but{
		height:30px;
		margin-top:5px;
	}
	.box .box-body .curriculum{
		margin:14px auto;
		width:100%;
		height:200px;
		border-radius:10px;
		background-color:#FFFFFF;
	}
	.box .box-body .curriculum .school{
		margin:0 auto;
		width:94%;
		height:50px;
		line-height:60px;
		font-size:18px;
		padding-left:10px;
		border-bottom: 1px solid #EEEEEE;
	}
	.box .box-body .curriculum .courseOrder{
		width:100%;
		height:150px;
	}
	.box .box-body .curriculum .courseOrder .courseUrl{
		width:40%;
		height:150px;
		float: left;
	}
	.box .box-body .curriculum .courseOrder .courseUrl image{
		width:110px;
		height:110px;
		border-radius: 10px;
		margin:20px 0px 0px 15px;
	}
	.box .box-body .curriculum .courseOrder .courseName{
		width:40%;
		height:150px;
		float: left;
	}
	.box .box-body .curriculum .courseOrder .courseName view{
		font-size:16px;
		margin:50px 0px 0px 0px;
	}
	.box .box-body .curriculum .courseOrder .courseMoney{
		width:20%;
		height:150px;
		float: left;
	}
	.box .box-body .curriculum .courseOrder .courseMoney .money{
		font-size:16px;
		color:#F3A73F;
		margin:50px 0px 0px 14px;
	}
	.box .box-body .curriculum .courseOrder .courseMoney .courseNum{
		color:#666666;
		padding-left:16px;
	}
	.box .box-body .coupon{
		margin:14px auto;
		width:100%;
		height:120px;
		border-radius:10px;
		background-color:#FFFFFF;
	}
	.box .box-body .coupon .thisOrder,.couponOrder{
		margin:0 auto;
		width:94%;
		height:54px;
		font-size:16px;
		line-height:54px;
		padding-left:10px;
		border-bottom: 1px solid #EEEEEE;
	}
	.box .box-body .coupon .couponOrder .couponn{
		float: left;
	}
	.box .box-body .coupon .couponOrder .courseCoupon{
		float: right;
		color:#C0C0C0;
		padding-right:20px;
	}
	.box .box-body .billDetails{
		margin:14px auto;
		width:100%;
		height:200px;
		border-radius:10px;
		background-color:#FFFFFF;
	}
	.box .box-body .billDetails .OrderBillDetails{
		margin:0 auto;
		width:94%;
		height:60px;
		font-size:18px;
		line-height:60px;
		padding-left:10px;
		border-bottom: 1px solid #EEEEEE;
	}
	.box .box-body .billDetails .price{
		height:43px;
		font-size:16px;
		line-height:40px;
		padding-left:15px;
	}
	.box .box-body .billDetails .price .courseJia{
		float:left;
	}
	.box .box-body .billDetails .price .coursePrice{
		float: right;
		padding-right: 20px;
	}
	.box .box-body .tips{
		width:100%;
		color:#939090;
	}
	.box .box-body .tips .purchaseInstructions{
		color:#586B95;
	}
	.box .box-floot{
		width:100%;
	}
	.box .box-floot .totalPrice {
		width:50%;
		height: 45px;
		float: left;
		font-size:16px;
		line-height:45px;
		padding-left:40px;
		background-color: #FFFFFF;
	}
	.box .box-floot .totalPrice text{
		font-size:20px;
		font-weight: bold;
		background-color:#FFFFFF;
	}
	.box .box-floot .placeOrder{
		width:50%;
		float: right;
		font-size:20px;
		border-radius:50px;
		margin:5px 5px 0px 0px;
	}
	.province{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
